// 项目统计
<template>
  <div class="projectStatistics">
    <el-form :inline="true" :model="params" class="demo-form-inline">
      <el-form-item label="城市：">
        <el-select v-model="params.cityId" placeholder="请选择城市" size="small" filterable clearable @change='changeCityId'>
          <el-option :label="item.city" :value="item.cityId" v-for='(item,index) in  cityList' :key="index" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="楼盘名称：">
        <el-select v-model="params.devId" placeholder="请选择楼盘" size="small" filterable clearable>
          <el-option :label="item.devName" :value="item.devId" v-for="(item,index) in devList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间：">
        <el-date-picker
          size="small"
          v-model="dateVal"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="small" id="monitorEnter">查询</el-button>
        <el-button type="success" @click="exportData" size="small">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      @sort-change='sort'
      style="width: 100%">
      <el-table-column
        align="center"
        fixed
        prop="ind"
        label="序号">
      </el-table-column>
      <el-table-column
        align="center"
        prop="cityName"
        label="城市">
      </el-table-column>
      <el-table-column
        align="center"
        prop="devName"
        label="楼盘名称">
      </el-table-column>
      <el-table-column
        align="center"
        prop="devId"
        label="楼盘id">
      </el-table-column>
      <el-table-column
        align="center"
        prop="lookCunt"
        sortable='custom'
        label="到访量">
        <template slot-scope="scope">
          <el-button type="text" @click="handleRaiseCount(scope.row,'到访量')">{{scope.row.lookCunt}}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="raiseCount"
        sortable='custom'
        label="认筹量">
        <template slot-scope="scope">
          <el-button type="text" @click="handleRaiseCount(scope.row,'认筹量')">{{scope.row.raiseCount}}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="paidRaise"
        sortable='custom'
        label="认筹金额（元）">
      </el-table-column>
      <el-table-column
        align="center"
        prop="tuiCount"
        sortable='custom'
        label="退款量">
        <template slot-scope="scope">
          <el-button type="text" @click="handleRaiseCount(scope.row,'退款量')">{{scope.row.tuiCount}}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="paidTui"
        sortable='custom'
        label="退款金额（元）">
      </el-table-column>
      <el-table-column
        align="center"
        prop="purchaseCount"
        sortable='custom'
        label="认购量">
        <template slot-scope="scope">
          <el-button type="text" @click="handleRaiseCount(scope.row,'认购量')">{{scope.row.purchaseCount}}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="signCount"
        sortable
        label="签约量">
        <template slot-scope="scope">
          <el-button type="text" @click="handleRaiseCount(scope.row,'签约量')">{{scope.row.lookCunt}}</el-button>
        </template>
      </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize">
        </el-pagination>
      </div>
  </div>
</template>

<script>
import api from '@/api/apiPath'
import util from '@/common/utils'
export default {
  name:'projectStatistics',
  title:'项目统计',
  data(){
    return {
      params: {
        cityId: '',
        devId: ''
      },
      dateVal:'',
      cityList:[],
      devList:[],
      tableData: [],
      pageData:{
        pageNum:1,
        pageSize:10
      },
      totalSize:0,
      filed:'',
      order:''
    }
  },
  created(){
    this.getCityList()
    this.getDevList()
    this.getDataList()
  },
  methods:{
    // 页面跳转
    handleRaiseCount(row,val){
      if(val == '认筹量' || val == '退款量'){
        // 跳转支付订单
        this.$router.push({path:'/payorderchecks',query:{
          devId:row.devId
        }})
      }else{
        // 跳转客户跟进
        
      }
    },
    // 排序
    sort(temp){
      let { order, prop } = temp
      if( prop && temp.order ){
        if(prop == "lookCunt"){
          this.filed = 'lookCunt'
        }else if(prop == 'raiseCount'){
          this.filed = 'raiseCount'
        }else if(prop == 'paidRaise'){
          this.filed = 'paidRaise'
        }else if(prop == 'tuiCount'){
          this.filed = 'tuiCount'
        }else if(prop == 'paidTui'){
          this.filed = 'paidTui'
        }else if(prop == 'purchaseCount'){
          this.filed = 'purchaseCount'
        }else if(prop == 'signCount'){
          this.filed = 'signCount'
        }
        if(order == 'ascending'){
          this.order = 'asc'
        } else if (order == 'descending') {
          this.order = 'desc'
        }
        this.getDataList()
      }else{
        this.filed = ''
        this.order = ''
        this.getDataList()
      }
    },
    // 导出
    exportData(){
      let beginTime,
          endTime
      if(typeof(this.dateVal) !='string' && this.dateVal){
        beginTime = this.dateVal[0]
        endTime = this.dateVal[1]
      }else{
        beginTime = ''
        endTime = ''
      }
      let param = {
        beginTime:beginTime,
        endTime:endTime,
        cityCode:this.params.cityId,
        devId:this.params.devId,
        filed:this.filed,
        order:this.order
      }
      let url = api.domain + '/estate/project/statistical/exportExcel'
      this.axios({
        method: "post",
        url: url,
        data: param,
        headers: {
          "content-type": "application/json; charset=utf-8",
          token: sessionStorage.getItem("cmsUser")
            ? JSON.parse(sessionStorage.getItem("cmsUser")).tokenId
            : ""
        },
        responseType: "blob"
      })
      .then(res => {
        this.downloadFile(res.data);
      })
      .catch(res => {
        console.log(res);
        //全局拦截器原因,返回参数为catch'
        this.downloadFile(res.data);
      });
    },
    downloadFile(data) {
      if(!data){
        this.$message({
            message: "导出错误",
            type: "warning"
        });
        return
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement("a");
      let fileName = `导出${util.getTimeString(new Date())}.xls`;
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
      this.$message({
        message: "导出成功",
        type: "success"
      });
    },
    handleSizeChange(val){
      this.pageData.pageNum = val
      this.getDataList()
    },
    handleCurrentChange(val){
      this.getDataList()
    },
    onSubmit() {
      this.pageData.pageNum = 1
      this.getDataList()
    },
    changeCityId(val){
      this.params.cityId = val
      this.getDevList()
    },
    // 城市列表
    getCityList(){
      this.$axios.post('/city/region/getCity/byRegion',{}).then(res=>{
        this.cityList = res
      })
    },
    // 楼盘列表
    getDevList(){
      this.$axios.post('/estate/devs/select/mapParam',{
        cityId:this.params.cityId
      }).then(res=>{
        this.devList = res
      })
    },
    getDataList(){
      let beginTime,
          endTime
      if(typeof(this.dateVal) !='string' && this.dateVal){
        beginTime = this.dateVal[0]
        endTime = this.dateVal[1]
      }else{
        beginTime = ''
        endTime = ''
      }
      let param = {
        beginTime:beginTime,
        endTime:endTime,
        cityCode:this.params.cityId,
        devId:this.params.devId,
        filed:this.filed,
        order:this.order,
        pageNum:this.pageData.pageNum,
        pageSize:this.pageData.pageSize
      }
      let url = api.domain + '/estate/project/statistical/list'
      this.axios({
        method: "post",
        url: url,
        data: param,
        headers: {
          "content-type": "application/json; charset=utf-8",
          token: sessionStorage.getItem("cmsUser")
            ? JSON.parse(sessionStorage.getItem("cmsUser")).tokenId
            : ""
        },
        responseType: "json"
      }).then(res=>{
        console.log(res)
        if(res.data.code == 200){
          this.tableData = res.data.data.list
          this.totalSize = res.data.data.total
          if(this.totalSize != 0){
            this.tableData[0].cityName = '--'
            this.tableData[0].devName = '--'
            this.tableData[0].devId = '--'
            this.tableData.forEach((item,index) => {
              if(index == 0){
                item.ind = '合计'
              }else{
                item.ind = index
              }
            })
          }
        }
      }).catch(error=>{
        console.log(error);
      })
    }
  }
}
</script>

<style lang="stylus">
  .projectStatistics{
    .block{
      margin-top :20px;
    }
    .el-table--scrollable-x .el-table__body-wrapper {
      overflow: scroll !important;
      height: 29rem !important;
    }
  }
</style>